<template>
  <div class="details-body">
			<div class="left"><van-icon name="arrow-left" @click="back" /></div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in imgurl.pics2" :key="index"><img @click="addl" :src="item"></van-swipe-item>
    </van-swipe>
    <div class="item_title">
        <div class="names">{{imgurl.basicInfo.name}}</div>
        <div>{{imgurl.basicInfo.characteristic}}</div>
        <div class="pice">
            <span class="text">低价￥{{imgurl.basicInfo.minPrice}}</span>
            <span>原价￥{{imgurl.basicInfo.originalPrice}}</span>
            <span>库存：{{imgurl.basicInfo.kanjiaPrice}}</span>
        </div>
    </div>
    <div class="main" v-html="imgurl.content"></div>
    <van-action-sheet v-model="show">
      <div class="content">
          <div class="conter_item">
               <div class="content_left"><img :src="imgurl.pics2[0]"></div>
               <div class="content_right">
                   <div>{{imgurl.basicInfo.name}}</div>
                   <div class="red">低价￥{{imgurl.basicInfo.minPrice}}</div>
               </div>
          </div>
          <div class="chicun">
              <div>{{imgurl.properties[0].childsCurGoods[0].name}}</div>
              <div>{{imgurl.properties[0].childsCurGoods[1].name}}</div>
          </div>
         <div class="footer">
             <van-stepper v-model="value" />
         </div>
      </div>
    </van-action-sheet>
    <van-goods-action>
       <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
       <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
       <van-goods-action-icon icon="star" text="已收藏" :class="{'red': iseatr == true }" @click="star" />
       <van-goods-action-button type="warning" text="加入购物车" @click="addCar(item)" />
       <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
     </van-goods-action>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            iseatr:false,
            show: false,
            value:0
        }
    },
    mounted(){
        let id=this.$route.query.id
        this.$store.dispatch('HOME_GETDETAILS',id)
    },
    computed:{
        imgurl(){
            console.log(this.$store.state.gtedetails.imgurl)
          return  this.$store.state.gtedetails.imgurl
        },

    },
    methods: {
        star(){
              this.iseatr=!this.iseatr
          },
        back(){
				this.$router.push({
					path:"/"
				})
            },
        onClickIcon() {
              this.$router.push({
					path:"/carts"
				})
        },
        addl(){
            ImagePreview(this.imgurl.pics2);
        },
        onClickButton() {
               console.log('买！')
        },
        addCar(goods){
            this.show = true
            this.$store.commit('addCart',goods);
        }
    },
}
</script>

<style scoped>
.details-body{
    background-color: #eee;
    position: relative;
}
.red{
    color:red;
}
.footer{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0rem 0.3rem;
}

.left{
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        background-color: aliceblue;
        z-index: 1000;
        display: inline-flex;
        justify-content: center;
        align-items: center;
	}

.van-swipe-item img{
    width:100%;
    height: 7rem;

}
.content{
    width: 100%;
    
}
.conter_item{
    width: 100%;
    height: 2rem;
    box-sizing: border-box;
    padding: 0.2rem -0.3rem;
     display: inline-flex;
    justify-content: space-between;
    border-bottom: 0.01rem solid gray;
}
.content_left{
    width: 30%;
    height:100% ;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.content_left img{
    width: 0.7rem;
    height: 0.7rem;
}
.content_right{
    width: 70%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;


}
.content_right div{
    width: 100%;
    height: 50%;
    display: inline-flex;
    align-items: center;
}
.item_title{
    width: 100%;
    height: 2rem;
    box-sizing: border-box;
    padding: 0.1rem;
    display: inline-flex;
    flex-direction: column;
    background-color: #fff;
}
.main{
    margin-top: 0.3rem;
    background-color: #fff;
}
.main>>>img{
    width: 100% !important;
    height: 100% !important;
}
.names{
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0rem;
    font-size: 0.3rem;
}
.pice{
    width: 100%;
    margin-top: 0.3rem;
    display: inline-flex;
    justify-content: space-between;
}
.text{
    color: red;
    font-size: 0.2rem;
}
.chicun{
    width: 100%;
    height: 2rem;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}
.chicun div{
    padding: 0.2rem;
    border:0.01rem solid gray;
}
</style>